import './App.css'

import { lazy, Suspense } from "react"
// 导入路由依赖模块
import {
  BrowserRouter as Router,    // 路由容器
  // HashRouter as Router,
  Route,                      // 路由规则
  Switch,                     // 唯一匹配
  Redirect,                   // 路由重定向组件
  NavLink                     // 声明式导航
} from 'react-router-dom'

// 导入路由视图组件
import Login from './views/Login' // 首页：直接导入，其他页面懒加载
// import Reg from './views/Reg'
// import Main from './views/Main'
// import NotFound from './views/NotFound'
// import About from './views/About'
// import Detail from './views/Detail'
// 懒加载导入组件
const Reg = lazy(() => import('./views/Reg'))
const Main = lazy(() => import('./views/Main'))
const NotFound = lazy(() => import('./views/NotFound'))
const About = lazy(() => import('./views/About'))
const Detail = lazy(() => import('./views/Detail'))

function App() {

  return (
    <div className="App">
      <h2>hello vite react!</h2>
      <hr />
      {/* 路由相关的所有内容，都必须包含在路由容器中 */}
      {/* 类似路由匹配方式：mode:history */}
      <Router>
        {/* 导航链接 */}
        <nav>
          {/* 类似：<router-link to="/main">首页</router-link> */}
          <NavLink to="/" exact>LOGO</NavLink>
          <NavLink to="/main">首页</NavLink>
          <NavLink to="/login">登录</NavLink>
          <NavLink to="/reg">注册</NavLink>
          <NavLink to="/about/website">网站介绍</NavLink>
          <NavLink to="/about/business">业务介绍</NavLink>

        </nav>
        <div className='goods'>
          <NavLink to="/detail?id=100&name=小米">小米</NavLink>
          <NavLink to="/detail?id=200&name=华为">华为</NavLink>
        </div>
        {/* fallback指定两个页面切换过渡效果，可以是组件可以是字符串 */}
        <Suspense fallback="加载中...">
          <Switch>

            {/* 路由规则：用户访问路径和对应组件之间的关系 */}
            {/* 类似：<router-view></router-view> + router/index.js */}
            <Route path="/" exact>
              <Redirect to="/login" />
            </Route>
            {/* <Redirect path="/" to="/reg" /> */}
            <Route path="/login" component={Login} />
            <Route path="/reg" component={Reg} />
            <Route path="/main" component={Main} />
            {/* 动态路由：路径中的keyword可以接受参数 */}
            <Route path="/about/:keyword" component={About} />
            {/* 查询字符串：传递查询条件参数(不用在匹配规则中添加) */}
            <Route path="/detail" component={Detail} />
            {/* 404路由 */}
            <Route path="*" component={NotFound} />

          </Switch>
        </Suspense>
      </Router>
    </div>
  )
}

export default App
